<template>
	<view class="content">
		<view class="Content">

			<view class="Address">
				<view class="Room">
					<picker @change="bindPickerChange" :range="Feeas" range-key="housename">

						<view class="uni-input">{{checkedHouse.housename}}</view>
					</picker>
				</view>
				<view class="iconfont icon-xia Bottom"></view>
			</view>
			<view class="Must">
				<view class="Should">应缴费:￥{{sum}}元</view>
				<view class="Payment">缴费</view>
			</view>
			<view class="Bill" v-for="(item,index) in FeeData" :key="index">
				<view class="Management">{{item.type}}</view>
				<view class="Room">
					<view class="House">房号</view>
					<view class="number">{{item.houseno}}</view>
				</view>
				<view class="Room RoomHouse">
					<view class="House">账单</view>
					<view class="number">{{item.begindate}}至{{item.enddate}}</view>
				</view>
				<view class="Room RoomHouse">
					<view class="House">账单金额</view>
					<view class="number">￥{{item.price}}元</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		FeeList,
		checkhouses
	} from "../../apis/index.js"
	export default {
		data() {
			return {
				checkedHouse: {},
				FeeData: [],
				Feeas: [],
				array: [],
				House: [],
				params: {
					houseid: null,
					page: 1,
					psize: 5
				}
			}
		},
		created() {
			this.getFeeList()
			this.getcheckhouses()
		},
		computed:{
			sum(){
				return this.FeeData.reduce((pre,cur)=>pre+cur.price,0)
			}
		},
		methods: {
			async getcheckhouses() {

				let result = await checkhouses()
				console.log(result, 121212)
				this.Feeas = result.list
				console.log(this.Feeas, "4567890");
				if (this.Feeas.length === 0) {
					uni.redirectTo({
						url: '/pages/Houseauthentication/Houseauthentication'
					})
				}
				this.Feeas = this.Feeas.map((item)=>({
					houseid : item.houseid,
					housename : item.building + item.houseno
					
				}))

				this.checkedHouse = this.Feeas[0]
				this.getFeeList()
			},
			bindPickerChange: function(e) {
				this.checkedHouse = this.Feeas[e.detail.value]
				this.getFeeList()
			},
			async getFeeList() {
				this.params.houseid = this.checkedHouse.houseid
				console.log(this.Feeas, "ppp6543s");
				let res = await FeeList(this.params)
				if (!res) return;


				this.FeeData = res.list
			}
		}
	}
</script>

<style lang="less">
	.Address {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 40rpx;
		box-sizing: border-box;

		.Room {
			font-size: 25rpx;
			color: #000;
			// padding-top: 40rpx;
			padding-left: 25rpx;
		}

		.Bottom {
			font-size: 20rpx;
			color: #606060;
			padding-left: 10rpx;
			width: 32rpx;
		}
	}

	.Must {
		height: 327rpx;
		background: url("../../static/images/bgs.png") no-repeat;
		background-size: 100% 327rpx;
		border-radius: 14rpx;
		margin: 34rpx 15rpx 23rpx 15rpx;

	}

	.Should {
		font-weight: bold;
		color: #fff;
		text-align: center;
		font-size: 40rpx;
		padding-top: 80rpx;
	}

	.Payment {
		height: 86rpx;
		background-color: #fff;
		width: 284rpx;
		border-radius: 40rpx;
		margin: 65rpx auto;
		font-size: 36rpx;
		color: #00a2f1;
		text-align: center;
		line-height: 86rpx;
	}

	.Bill {
		height: 320rpx;
		background-color: #fff;
		margin: 20rpx 15rpx 0rpx 15rpx;

		.Management {
			font-size: 33rpx;
			border-bottom: 3rpx solid #eee;
			margin-left: 34rpx;
			padding-bottom: 25rpx;
			padding-top: 34rpx;
		}
	}

	.Room {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;

		.House {
			font-size: 30rpx;
			position: absolute;
			left: 38rpx;
			top: 25rpx;
		}

		.number {
			font-size: 30rpx;
			position: absolute;
			right: 38rpx;
			top: 25rpx;
		}
	}

	.RoomHouse {
		margin-top: 50rpx;
	}
</style>